<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">生长记录</text>
    </view>
    
    <!-- 使用日期滚动组件 -->
    <view class="date-section">
      <view class="date-header">
        <text class="section-title">{{ formatDate(currentDate) }}</text>
      </view>
      <date-scroll-calendar v-model="currentDate" @change="onDateChange"></date-scroll-calendar>
    </view>
    
    <!-- 记录表单 -->
    <view class="form-section">
      <view class="form-item">
        <text class="form-label">体重 (kg)</text>
        <input type="digit" v-model="weight" placeholder="请输入宝宝体重" class="form-input" />
      </view>
      
      <view class="form-item">
        <text class="form-label">身长 (cm)</text>
        <input type="digit" v-model="height" placeholder="请输入宝宝身长" class="form-input" />
      </view>
      
      <view class="form-item">
        <text class="form-label">头围 (cm)</text>
        <input type="digit" v-model="headCircumference" placeholder="请输入宝宝头围" class="form-input" />
      </view>
      
      <view class="form-item">
        <text class="form-label">备注</text>
        <textarea v-model="notes" placeholder="添加备注..." class="form-textarea" />
      </view>
      
      <button class="save-btn" @click="saveRecord">保存记录</button>
    </view>
  </view>
</template>

<script>
import DateScrollCalendar from '@/components/date-scroll-calendar/date-scroll-calendar.vue'

export default {
  components: {
    DateScrollCalendar
  },
  data() {
    return {
      currentDate: this.formatDateForInput(new Date()),
      weight: '',
      height: '',
      headCircumference: '',
      notes: ''
    }
  },
  methods: {
    // 格式化日期用于输入
    formatDateForInput(date) {
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    
    // 格式化日期用于显示
    formatDate(dateString) {
      const date = new Date(dateString)
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      return `${year}年${month}月${day}日`
    },
    
    // 处理日期变化
    onDateChange(date) {
      console.log('日期已变更为:', date)
      // 这里可以加载特定日期的记录
    },
    
    // 保存记录
    saveRecord() {
      // 表单验证
      if (!this.weight && !this.height && !this.headCircumference) {
        uni.showToast({
          title: '请至少填写一项数据',
          icon: 'none'
        })
        return
      }
      
      // 保存记录逻辑
      const record = {
        date: this.currentDate,
        weight: this.weight ? parseFloat(this.weight) : null,
        height: this.height ? parseFloat(this.height) : null,
        headCircumference: this.headCircumference ? parseFloat(this.headCircumference) : null,
        notes: this.notes,
        timestamp: new Date().getTime()
      }
      
      console.log('保存记录:', record)
      
      // 这里应该添加保存到数据库的代码
      // ...
      
      uni.showToast({
        title: '记录已保存',
        icon: 'success'
      })
      
      // 清空表单
      this.weight = ''
      this.height = ''
      this.headCircumference = ''
      this.notes = ''
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  background-color: #1c1d30;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.page-header {
  margin-bottom: 30rpx;
}

.page-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.date-section {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 30rpx;
  padding: 25rpx 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2);
  border: 1rpx solid rgba(255, 105, 180, 0.15);
  position: relative;
}

.date-header {
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.form-section {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 30rpx;
  padding: 30rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2);
  border: 1rpx solid rgba(255, 105, 180, 0.15);
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 15rpx;
  font-weight: 600;
}

.form-input, .form-textarea {
  width: 100%;
  background: #2d2b39;
  border: 1rpx solid rgba(255, 255, 255, 0.15);
  border-radius: 16rpx;
  padding: 20rpx;
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
}

.form-input {
  height: 80rpx;
}

.form-textarea {
  min-height: 160rpx;
}

.save-btn {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(135deg, #ff7b9c, #ff4281);
  color: white;
  border: none;
  border-radius: 20rpx;
  font-size: 32rpx;
  font-weight: 600;
  box-shadow: 0 6rpx 20rpx rgba(255, 66, 129, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.save-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 8rpx rgba(255, 105, 180, 0.5);
}
</style> 